<template>
	<view class="wrap">
		<view class="header">
			<view class="user">
				<image :src="(userData&&userData.avatar) || '../../static/avatar-default.png'" class="avatar" mode=""></image>
				<view class="" v-if="userData">
					<text>{{userData.nickName}}</text>
					<view class="" @click="copy(userData.userNo)">
						<text>ID:{{userData.userNo}}</text>
						<image src="../../static/copy.png" class="copy" mode=""></image>
					</view>
				</view>
				<view class="" v-else @click="bindLogin">
					<text>未登录</text>
					<view class="">
						<text>请登录</text>
						
					</view>
				</view>
			</view>
			<view class="notice" @click="bindMessageNotice">
				<text v-if="isNewsState"></text>
				<image src="../../static/lingdang.png" mode=""></image>
			</view>
		</view>
		
	</view>
	<view class="account-box">
		<image src="../../static/my-account-bg.png" class="my-account-bg" mode="widthFix"></image>
		<view class="content" @click="bindWallet">
			<view class="c-1">
				<text>账户余额</text>
				<image src="../../static/right-wite.png" mode=""></image>
			</view>
			<view class="c-2">
				<text class="amount">{{userData?userData.balance:'0'}}</text>
				<text class="unit">USDT</text>
			</view>
			<view class="c-3">
				<view class="">
					<text class="label">昨日收益</text>
					<text class="value">{{userData? userData.yesterdayAmount+' U':'0'}}</text>
				</view>
				<view class="">
					<text class="label">累计收益</text>
					<text class="value">{{userData? userData.totalAmount+' U':'0'}}</text>
				</view>
			</view>
			
		</view>
		<view class="c-4">
			<view class="" @click="bindRecharge">
				<image src="../../static/cz.png" mode=""></image>
				<text>充值</text>
			</view>
			<text class="line"></text>
			<view class="" @click="bindTrans">
				<image src="../../static/zz.png" mode=""></image>
				<text>转账</text>
			</view>
			<text class="line"></text>
			<view class="" @click="bindReflect">
				<image src="../../static/tx.png" mode=""></image>
				<text>提现</text>
			</view>
		</view>
	</view>
	<view class="team">
		<view class="title" @click="bindTeam">
			<text>我的团队</text>
			<image src="/static/rihgt-999.png" mode=""></image>
		</view>
		<view class="amount">
			<text class="label">累计收益</text>
			<text class="value">{{statistics.totalAmount}} U</text>
		</view>
		<view class="users" v-if="userData">
			<view class="" v-for="(item,index) in team" :key="index">
				<image :src="item.avatar || '../../static/avatar-default.png'" class="user" mode="" v-if="index<4"></image>
			</view>
			
			
			<view class="add-user" @click="copyInvite">
				<image src="../../static/add.png" mode=""></image>
			</view>
		</view>
	</view>
	<view class="list">
		<view class="item" @click="bindService">
			<view class="">
				<image src="../../static/service-black.png" mode=""></image>
				<text>联系客服</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
		<view class="item" @click="bindPlatform">
			<view class="">
				<image src="../../static/zx.png" mode=""></image>
				<text>平台资讯</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
		<view class="item" @click="secure">
			<view class="">
				<image src="../../static/aq.png" mode=""></image>
				<text>账号与安全</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
		<view class="item" @click="bindAbout">
			<view class="">
				<image src="../../static/about.png" mode=""></image>
				<text>关于我们</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
	</view>
	<uni-tabBar current="3"></uni-tabBar>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		user,
		remindGet,
		teamList,
		teamStatistics,
		constantGet
	} from '@/util/api.js'
	import { ref } from 'vue';
	const userData = ref()
	const isNewsState = ref(false)
	const statistics = ref({totalAmount:0})
	const team = ref([])
	const invite = ref()
	onShow(() => {
		uni.hideTabBar({
			animation: false
		})
		getUser()
		isNews()
		getData()
		getInvitebConfig()
	})
	// 获取团队列表
	const getData = async ()=>{
		const result = await teamList({pageNum:1,pageSize:100000})
		const result2 = await teamStatistics()
		if(result2.code==200){
			statistics.value  = result2.data
		}
		if(result.code==200){
		team.value = result.data.records	
		}
	}
	// 邀请链接配置
	const getInvitebConfig = async ()=>{
		const result = await constantGet({key:"invite_url"})
		if(result.code==200){
			invite.value = JSON.parse(result.data.data)
		}
		
		
	}
	// 获取当前登录用户信息
	const getUser = async() =>{
		const result = await user()
		console.log(result)
		if(result.code==200){
			userData.value = result.data
		}else{
			userData.value = null
		}
	}
	const copy = (text) => {
		uni.setClipboardData({
			data: String(text),
			success: function() {
				console.log('success');
			}
		});
	}
	const copyInvite = ()=>{
		// uni.setClipboardData({
		// 	data: String(invite.value.value),
		// 	success: function() {
		// 		console.log('success');
		// 	}
		// });
		uni.navigateTo({
			url:"/pages/invcode/invcode"
		})
	}
	
	const bindTeam = ()=>{
		if(userData.value){
			uni.navigateTo({
				url:"/pages/team/team"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 账号与安全
	const secure = ()=>{
		if(userData.value){
			uni.navigateTo({
				url:"/pages/secure/secure"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
		
	}
	// 消息通知
	const bindMessageNotice = ()=>{
		
		if(userData.value){
			uni.navigateTo({
				url:"/pages/messageNotice/messageNotice"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	const bindAbout = ()=>{
		uni.navigateTo({
			url:"/pages/about/about"
		})
	}
	const bindPlatform = ()=>{
		uni.navigateTo({
			url:"/pages/platformNews/platformNews"
		})
	}
	// 登录
	const bindLogin = ()=>{
		uni.navigateTo({
			url:"/pages/loginForCode/loginForCode"
		})
	}
	// 判断是否有新消息
	const isNews = async ()=>{
		const result = await remindGet()
		if(result.code==200){
			isNewsState.value = result.data
		}
		
	}
	// 跳转钱包
	const bindWallet = () =>{
		if(userData.value){
			uni.navigateTo({
				url:"/pages/wallet/wallet"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 充值
	const bindRecharge = () =>{
		if(userData.value){
			uni.navigateTo({
				url:"/pages/recharge/recharge"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 转账
	const bindTrans = () =>{
		if(userData.value){
			uni.navigateTo({
				url:"/pages/transfer/transfer"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 提现
	const bindReflect = () =>{
		if(userData.value){
			uni.navigateTo({
				url:"/pages/withdrawal/withdrawal"
			})
		}else{
			uni.showModal({
				title:"提示",
				content:"需要登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 联系客服
	const bindService = ()=>{
		uni.navigateTo({
			url:"/pages/webViewService/webViewService"
		})
	}
</script>

<style lang="scss">
	.list{
		margin: 30rpx auto;
		width: 597rpx;
		
		background: #FFFFFF;
		padding:20rpx 38rpx;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49,54,70,0.06);
		border-radius: 23rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			>image{
				width: 23rpx;
				height: 23rpx;
				display: block;
			}
			>view{
				display: flex;
				align-items: center;
				image{
					display: block;
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}
				text{
					display: block;
					color: #313646;
					font-size: 28rpx;
				}
			}
		}
	}
	.team{
		width: 597rpx;
		// height: 201rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49,54,70,0.06);
		border-radius: 23rpx;
		margin: 30rpx auto;
		padding: 38rpx;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				color: #313646;
				font-size: 28rpx;
				display: block;
				font-weight: bold;
			}
			image{
				display: block;
				width: 23rpx;
				height: 23rpx;
			}
		}
		.amount{
			display: flex;
			margin-top: 30rpx;
			align-items: center;
			.label{
				color: #313646;
				font-size: 24rpx;
				display: block;
				margin-right: 20rpx;
			}
			.value{
				color: #FF2F22;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
		.users{
			display: flex;
			margin-top: 30rpx;
			align-items: center;
			.user{
				width: 85rpx;
				height: 85rpx;
				display: block;
				margin-right: 36rpx;
				background: pink;
				border-radius: 50%;
			}
			.add-user{
				width: 85rpx;
				height: 85rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #EDEEF1;
				border-radius: 50%;
				image{
					display: block;
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
	}
	.account-box{
		position: relative;
		
		height: 400rpx;
		
		.my-account-bg
		{
			position: absolute;
			width: 100%;
			
			top: 0;
			left: 0;
		}
		.c-4{
			position: absolute;
			z-index: 99;
			width: 680rpx;
			height: 112rpx;
			left: 72rpx;
			bottom: 0;
			background: rgba(255,255,255,0.2);
			border-radius: 0px 0px 23rpx 23rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: -36rpx;
			.line{
				display: block;
				width: 1rpx;
				height: 50rpx;
				background: #fff;
				opacity: 0.2;
			}
			view{
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					display: block;
					width: 58rpx;
					height: 58rpx;
					margin-right: 12rpx;
				}
				text{
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
		.content{
			position: relative;
			top: 72rpx;
			padding: 0 72rpx;
			.c-1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					display: block;
					font-size: 24rpx;
					color: rgba(255,255,255,0.7);
				}
				image{
					display: block;
					width: 23rpx;
					height: 23rpx;
				}
			}
			.c-2{
				display: flex;
				align-items: flex-end;
				margin-top: 23rpx;
				margin-bottom: 38rpx;
				.amount{
					font-size: 58rpx;
					color: #fff;
					font-weight: bold;
					display: block;
					margin-right: 18rpx;
					line-height: 1;
				}
				.unit{
					font-size: 27rpx;
					color: #fff;
					line-height: 1;
				}
			}
			.c-3{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 38rpx;
				view{
					display: flex;
					.label{
						color: rgba(255,255,255,0.7);
						font-size: 24rpx;
						display: block;
						margin-right: 20rpx;
					}
					.value{
						color: rgba(255,255,255,1);
						font-size: 24rpx;
					}
				}
			}
			
		}
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
		.user{
			display: flex;
			.avatar{
				display: block;
				width: 108rpx;
				height: 108rpx;
				margin-right: 27rpx;
			}
			>view{
				>text{
					color: #313646;
					font-size: 38rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 12rpx;
				}
				>view{
					display: flex;
					align-items: center;
					>text{
						color: #313646;
						font-size: 27rpx;
					}
					image{
						display: block;
						width: 31rpx;
						height: 31rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
		.notice{
			background: rgba(204,212,231,0.2);
			width: 69rpx;
			height: 69rpx;
			border-radius: 23rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			image{
				display: block;
				width: 38rpx;
				height: 38rpx;
			}
			text{
				position: absolute;
				width: 13rpx;
				height: 13rpx;
				background: #FF2F22;
				border-radius: 50%;
				right: 0;
				top: -13rpx;
			}
		}
	}
	.wrap{
		padding: 100rpx 38rpx 0;
	}
	page{
		background: #F6F7F9;
	}
</style>